<template>
  <div class="comment_box">
    <h1>发表评论</h1>
    <textarea placeholder="请输入你要BB的内容 最多BB120字" maxlength="120" v-model="msg"></textarea>
    <mt-button type="primary" size="large" @click="add_comment">发表评论</mt-button>

    <div v-for="(item,i) in contents" :key="i">
      <div class="title">
        第{{ i+1 }}楼 &nbsp;&nbsp; 用户：{{item.user_name}} &nbsp;&nbsp; 发表时间：{{item.add_time | timeL}}&nbsp;&nbsp;  
      </div>
      <div class="content">
        {{item.content==="undefined"?"此用户啥也没BB":item.content}}
      </div>
    </div>
    
    <mt-button type="danger" plain size="large" @click="getLast">加载更多</mt-button>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      index:1,
      contents:[],
      msg:"",
      content:{}
    };
  },
  props:['id'],
  created(){
    this.getComment()
  },
  methods:{
    getComment(){
      this.$http.get(`api/getcomments/${this.id}?pageindex=${this.index}`).then(res=>{
        console.log(res.body);
        
        if(res.body.status===0){
           this.contents=this.contents.concat(res.body.message)
        }else{
          
            Toast("获取评论列表失败！");
        }
      })
    },
    getLast(){
      this.index++;
      this.getComment()
    },
    add_comment(){  //发表评论
          if(!(this.msg.trim()==='')){
            this.content={
              content:this.msg,
              user_name:"匿名用户",
              add_time:new Date()
            }
            this.$http.post('api/postcomment/'+ this.id,this.content).then(res=>{
              if(res.body.status===0){
                this.contents.unshift(this.content);
                this.msg=""
              }
            })
          }else{
            Toast('请输入内容')
          }
    }
  }
}
</script>
<style lang="scss" scoped>
  .comment_box{
    h1{
      font-size: 16px;
    }
    textarea{
      font-size: 13px;
      margin: 0;
    }
   .title{
      font-size: 12px;
      line-height: 25x;
      background-color: #ccc;
    }
    .content{
      font-size: 12px;
      line-height: 35px; 
      background-color: #fff;
      text-indent: 2em;
    }
  }
</style>